import {Component} from "@angular/core";

@Component({
    selector: 'keyup-v1',
    template: `
<div>keyup v1 -
    <input (keyup)="onKey($event)">
    <p>{{values}}</p>
</div>
    `
})
export class KeyupComponent_v1 {
    values = ''

    onKey(event: any) {
        this.values += event.target.value + ' | '
    }
}

@Component({
    selector: 'keyup-v2',
    template: `
<div>keyup v2 -
    <input #box (keyup)="onKey(box.value)">
    <p>{{values}}</p>
</div>
    `
})
export class KeyupComponent_v2 {
    values = ''

    onKey(value: string) {
        this.values += value + ' | '
    }
}

@Component({
    selector: 'keyup-v3',
    template: `
<div>keyup v3 -
    <input #box (keyup.enter)="values=box.value">
    <p>{{values}}</p>
</div>
    `
})
export class KeyupComponent_v3 {
    values = ''
}

@Component({
    selector: 'keyup-v4',
    template: `
<div>keyup v4 -
    <input #box (keyup.enter)="values=box.value"
        (blur)="values=box.value">
    <p>{{values}}</p>
</div>
    `
})
export class KeyupComponent_v4 {
    values = ''
}